<!DOCTYPE html>
<!-- saved from url=(0053)http://www.jq22.com/demo/animationResume201903280031/ -->
<html lang="zh-Hans"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>海宝的简历</title>
<link rel="stylesheet" href="./assets/prism.css">
<link rel="stylesheet" href="./assets/defult.css">
<style id="myStyle">
/*你好，我是海宝，一名前端工程师。
请允许我做一个简单的自我介绍，但是纯文字太单调，所以我想来点特别的。
首先我准备一下样式。*/
*{
	transition: all .5s;
}
/*白色伤眼睛，来点暗色系的背景吧！*/
html{
	background: #333034;
}
/*让我们给它加一个边框吧*/
#code{
    border: 2px solid #00FF1B;
    padding: 20px;
}
/*代码看不清楚？来点高亮吧！*/
.token.selector{
    color: #a6e22e;
}
.token.property{
    color: #f92672;
}
.token.punctuation{
    color: #f8f8f2;
}
.token.function{
    color: red;
}
#code{
    color: #f8f8f2;
}
/*来点动画吧*/
#code{
    animation: breath 4s linear infinite;
}
/*现在开始写简历吧*/
/*首先我需要一张纸*/

#code{
    display: inline-block;
    position: fixed;
    right: 0;
    width: 50%;
    height: 80%;
    margin-right: 20px;
}
#paper{
    position: fixed;
    left: 0;
    width: 45%;
    height: 80%;
    background: linear-gradient(to bottom, #f4f39e, #f5da41); 
    padding: 20px;
    margin-left: 20px;
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 0 #F6EF97;
    margin-top: 30%;
    
}
/*掉下去了！怎么办？*/
/*没关系，再用胶带粘住它*/
#paper:after {
    width: 25%;
    height: 5%;
    content: " ";
    margin-left: -90px;
    border: 1px solid rgba(200, 200, 200, .8);
    background: rgba(254, 254, 254, .6);
    box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
    transform: rotate(-5deg);
    position: absolute;
    left: 50%;
    top:-15px;
}
#paper{
    margin-top: 0;
}
</style>
</head>
<body>
<div id="box">
<pre id="code">
<span class="token comment">/*你好，我是冠希哥，一名前端工程师。
请允许我做一个简单的自我介绍，但是纯文字太单调，所以我想来点特别的。
首先我准备一下样式。*/</span>
<span class="token selector">*</span><span class="token punctuation">{</span>
	<span class="token property">transition</span><span class="token punctuation">:</span> all .5s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*白色伤眼睛，来点暗色系的背景吧！*/</span>
<span class="token selector">html</span><span class="token punctuation">{</span>
	<span class="token property">background</span><span class="token punctuation">:</span> #333034<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*让我们给它加一个边框吧*/</span>
<span class="token selector">#code</span><span class="token punctuation">{</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #00FF1B<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*代码看不清楚？来点高亮吧！*/</span>
<span class="token selector">.token.selector</span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #a6e22e<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.token.property</span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #f92672<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.token.punctuation</span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #f8f8f2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.token.function</span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#code</span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #f8f8f2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*来点动画吧*/</span>
<span class="token selector">#code</span><span class="token punctuation">{</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> breath 4s linear infinite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*现在开始写简历吧*/</span>
<span class="token comment">/*首先我需要一张纸*/</span>

<span class="token selector">#code</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#paper</span><span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 45%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom, #f4f39e, #f5da41<span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">margin-left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 2px 10px 1px <span class="token function">rgba</span><span class="token punctuation">(</span>0, 0, 0, 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 2px 10px 1px <span class="token function">rgba</span><span class="token punctuation">(</span>0, 0, 0, 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 1px 0 #F6EF97<span class="token punctuation">;</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span>
    
<span class="token punctuation">}</span>
<span class="token comment">/*掉下去了！怎么办？*/</span>
<span class="token comment">/*没关系，再用胶带粘住它*/</span>
<span class="token selector">#paper:after</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" "</span><span class="token punctuation">;</span>
    <span class="token property">margin-left</span><span class="token punctuation">:</span> -90px<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">rgba</span><span class="token punctuation">(</span>200, 200, 200, .8<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>254, 254, 254, .6<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 0 3px <span class="token function">rgba</span><span class="token punctuation">(</span>0, 0, 0, 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-5deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span>-15px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#paper</span><span class="token punctuation">{</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
<pre id="paper">
<span class="token title important"><span class="token punctuation">#</span> 简历</span>
<span class="token title important"><span class="token punctuation">##</span> 基本资料</span>
<span class="token bold"><span class="token punctuation">**</span>姓名：冠希哥<span class="token punctuation">**</span></span>
<span class="token bold"><span class="token punctuation">**</span>年龄：23<span class="token punctuation">**</span></span>
<span class="token bold"><span class="token punctuation">**</span>坐标：南京<span class="token punctuation">**</span></span>
<span class="token bold"><span class="token punctuation">**</span>QQ: xxxxxxx<span class="token punctuation">**</span></span>
<span class="token bold"><span class="token punctuation">**</span>微信：smwell_guanxi<span class="token punctuation">**</span></span>
<span class="token bold"><span class="token punctuation">**</span>博客：http://www.heguanxi.com/<span class="token punctuation">**</span></span>
**Github:http://ww</pre></div>
<script src="./assets/marked.min.js"></script>
<script src="./assets/code.js"></script>
<script src="./assets/prism.js"></script>
<script src="./assets/main.js"></script>

</body></html>